<template>
  <view class="settings-page">


    <scroll-view class="main-content" scroll-y>
      <!-- General Settings -->
      <view class="settings-section">
        <text class="section-title">通用</text>
        
        <view class="settings-list">
          <!-- Notifications -->
          <view class="setting-item">
            <view class="setting-info">
              <text class="setting-icon">🔔</text>
              <view class="setting-details">
                <text class="setting-title">通知提醒</text>
                <text class="setting-subtitle">习惯提醒、任务提醒</text>
              </view>
            </view>
            <switch 
              class="setting-switch" 
              :checked="settings.notifications" 
              @change="toggleNotifications"
            />
          </view>

          <!-- Theme -->
          <view class="setting-item" @tap="showThemeOptions">
            <view class="setting-info">
              <text class="setting-icon fas fa-palette"></text>
              <view class="setting-details">
                <text class="setting-title">主题外观</text>
                <text class="setting-subtitle">{{ currentTheme }}</text>
              </view>
            </view>
            <text class="setting-arrow">›</text>
          </view>

          <!-- Language -->
          <view class="setting-item" @tap="showLanguageOptions">
            <view class="setting-info">
              <text class="setting-icon fas fa-globe"></text>
              <view class="setting-details">
                <text class="setting-title">语言</text>
                <text class="setting-subtitle">简体中文</text>
              </view>
            </view>
            <text class="setting-arrow">›</text>
          </view>

          <!-- Auto Backup -->
          <view class="setting-item">
            <view class="setting-info">
              <text class="setting-icon fas fa-cloud"></text>
              <view class="setting-details">
                <text class="setting-title">自动备份</text>
                <text class="setting-subtitle">数据自动备份到云端</text>
              </view>
            </view>
            <switch 
              class="setting-switch" 
              :checked="settings.autoBackup" 
              @change="toggleAutoBackup"
            />
          </view>
        </view>
      </view>

      <!-- Privacy & Security -->
      <view class="settings-section">
        <text class="section-title">隐私与安全</text>
        
        <view class="settings-list">
          <!-- App Lock -->
          <view class="setting-item">
            <view class="setting-info">
              <text class="setting-icon">🔒</text>
              <view class="setting-details">
                <text class="setting-title">应用锁</text>
                <text class="setting-subtitle">启用密码保护</text>
              </view>
            </view>
            <switch 
              class="setting-switch" 
              :checked="settings.appLock" 
              @change="toggleAppLock"
            />
          </view>

          <!-- Biometric -->
          <view class="setting-item" :class="{disabled: !settings.appLock}">
            <view class="setting-info">
              <text class="setting-icon fas fa-hand-pointer"></text>
              <view class="setting-details">
                <text class="setting-title">生物识别</text>
                <text class="setting-subtitle">指纹/面容解锁</text>
              </view>
            </view>
            <switch 
              class="setting-switch" 
              :checked="settings.biometric && settings.appLock" 
              :disabled="!settings.appLock"
              @change="toggleBiometric"
            />
          </view>

          <!-- Privacy Policy -->
          <view class="setting-item" @tap="showPrivacyPolicy">
            <view class="setting-info">
              <text class="setting-icon">📋</text>
              <view class="setting-details">
                <text class="setting-title">隐私政策</text>
                <text class="setting-subtitle">查看隐私保护条款</text>
              </view>
            </view>
            <text class="setting-arrow">›</text>
          </view>
        </view>
      </view>

      <!-- Data Management -->
      <view class="settings-section">
        <text class="section-title">数据管理</text>
        
        <view class="settings-list">
          <!-- Data Source -->
          <view class="setting-item" @tap="goToDataSource">
            <view class="setting-info">
              <text class="setting-icon fas fa-database"></text>
              <view class="setting-details">
                <text class="setting-title">数据源设置</text>
                <text class="setting-subtitle">切换远程API、Mock或本地SQLite</text>
              </view>
            </view>
            <text class="setting-arrow">›</text>
          </view>

          <!-- Export Data -->
          <view class="setting-item" @tap="exportData">
            <view class="setting-info">
              <text class="setting-icon">📤</text>
              <view class="setting-details">
                <text class="setting-title">导出数据</text>
                <text class="setting-subtitle">导出所有个人数据</text>
              </view>
            </view>
            <text class="setting-arrow">›</text>
          </view>

          <!-- Import Data -->
          <view class="setting-item" @tap="importData">
            <view class="setting-info">
              <text class="setting-icon">📥</text>
              <view class="setting-details">
                <text class="setting-title">导入数据</text>
                <text class="setting-subtitle">从备份文件恢复数据</text>
              </view>
            </view>
            <text class="setting-arrow">›</text>
          </view>

          <!-- Clear Cache -->
          <view class="setting-item" @tap="clearCache">
            <view class="setting-info">
              <text class="setting-icon fas fa-trash"></text>
              <view class="setting-details">
                <text class="setting-title">清除缓存</text>
                <text class="setting-subtitle">清理临时文件</text>
              </view>
            </view>
            <text class="setting-arrow">›</text>
          </view>
        </view>
      </view>

      <!-- About -->
      <view class="settings-section">
        <text class="section-title">关于</text>
        
        <view class="settings-list">
          <!-- Version -->
          <view class="setting-item">
            <view class="setting-info">
              <text class="setting-icon fas fa-mobile-alt"></text>
              <view class="setting-details">
                <text class="setting-title">版本信息</text>
                <text class="setting-subtitle">v1.0.0 (Build 100)</text>
              </view>
            </view>
          </view>

          <!-- Help & Support -->
          <view class="setting-item" @tap="showHelp">
            <view class="setting-info">
              <text class="setting-icon">❓</text>
              <view class="setting-details">
                <text class="setting-title">帮助与支持</text>
                <text class="setting-subtitle">使用指南和常见问题</text>
              </view>
            </view>
            <text class="setting-arrow">›</text>
          </view>

          <!-- Feedback -->
          <view class="setting-item" @tap="sendFeedback">
            <view class="setting-info">
              <text class="setting-icon fas fa-comment"></text>
              <view class="setting-details">
                <text class="setting-title">意见反馈</text>
                <text class="setting-subtitle">告诉我们您的想法</text>
              </view>
            </view>
            <text class="setting-arrow">›</text>
          </view>
          
          <!-- uni-ui Demo -->
          <view class="setting-item" @tap="goToUniUIDemo">
            <view class="setting-info">
              <text class="setting-icon fas fa-code"></text>
              <view class="setting-details">
                <text class="setting-title">uni-ui组件演示</text>
                <text class="setting-subtitle">查看组件示例</text>
              </view>
            </view>
            <text class="setting-arrow">›</text>
          </view>
          
          <!-- nvue Demo -->
          <view class="setting-item" @tap="goToNvueDemo">
            <view class="setting-info">
              <text class="setting-icon fas fa-mobile-alt"></text>
              <view class="setting-details">
                <text class="setting-title">nvue页面演示</text>
                <text class="setting-subtitle">原生渲染页面示例</text>
              </view>
            </view>
            <text class="setting-arrow">›</text>
          </view>

          <!-- Rate App -->
          <view class="setting-item" @tap="rateApp">
            <view class="setting-info">
              <text class="setting-icon fas fa-star"></text>
              <view class="setting-details">
                <text class="setting-title">给应用评分</text>
                <text class="setting-subtitle">在应用商店评分</text>
              </view>
            </view>
            <text class="setting-arrow">›</text>
          </view>
        </view>
      </view>

      <!-- Danger Zone -->
      <view class="settings-section danger">
        <text class="section-title danger">危险操作</text>
        
        <view class="settings-list">
          <!-- Reset App -->
          <view class="setting-item danger" @tap="resetApp">
            <view class="setting-info">
              <text class="setting-icon fas fa-exclamation-triangle"></text>
              <view class="setting-details">
                <text class="setting-title danger">重置应用</text>
                <text class="setting-subtitle">清除所有数据并重置设置</text>
              </view>
            </view>
            <text class="setting-arrow">›</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      notificationsEnabled: true,
      darkModeEnabled: false,
      userInfo: {
        username: '用户名',
        email: 'user@example.com',
        avatar: ''
      }
    }
  },
  methods: {
    editProfile() {
      uni.showToast({
        title: '编辑个人资料',
        icon: 'none'
      })
    },
    onNotificationChange(e) {
      this.notificationsEnabled = e.detail.value
      uni.showToast({
        title: this.notificationsEnabled ? '已开启通知' : '已关闭通知',
        icon: 'none'
      })
    },
    onThemeChange(e) {
      this.darkModeEnabled = e.detail.value
      uni.showToast({
        title: this.darkModeEnabled ? '已切换到深色模式' : '已切换到浅色模式',
        icon: 'none'
      })
    },
    setLanguage() {
      uni.showActionSheet({
        itemList: ['中文', 'English', '日本語'],
        success: (res) => {
          const languages = ['中文', 'English', '日本語']
          uni.showToast({
            title: `已切换到${languages[res.tapIndex]}`,
            icon: 'none'
          })
        }
      })
    },
    goToDataSource() {
      uni.navigateTo({
        url: '/pages/settings/dataSource'
      })
    },
    exportData() {
      uni.showLoading({
        title: '导出中...'
      })
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '数据导出成功',
          icon: 'success'
        })
      }, 2000)
    },
    importData() {
      uni.chooseFile({
        count: 1,
        extension: ['.json'],
        success: (res) => {
          uni.showToast({
            title: '数据导入成功',
            icon: 'success'
          })
        },
        fail: () => {
          uni.showToast({
            title: '导入失败',
            icon: 'error'
          })
        }
      })
    },
    clearData() {
      uni.showModal({
        title: '确认清除',
        content: '此操作将清除所有数据，且无法恢复，确定继续吗？',
        confirmColor: '#EF4444',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '清除中...'
            })
            setTimeout(() => {
              uni.hideLoading()
              uni.showToast({
                title: '数据已清除',
                icon: 'success'
              })
            }, 1500)
          }
        }
      })
    },
    showAbout() {
      uni.navigateTo({
        url: '/pages/about/index'
      })
    },
    showPrivacy() {
      uni.navigateTo({
        url: '/pages/privacy/index'
      })
    },
    showTerms() {
      uni.navigateTo({
        url: '/pages/terms/index'
      })
    },
    logout() {
      uni.showModal({
        title: '确认退出',
        content: '确定要退出登录吗？',
        confirmColor: '#EF4444',
        success: (res) => {
          if (res.confirm) {
            // 清除用户数据
            uni.removeStorageSync('userToken')
            uni.removeStorageSync('userInfo')
            
            uni.showToast({
              title: '已退出登录',
              icon: 'success'
            })
            
            // 跳转到登录页面
            setTimeout(() => {
              uni.reLaunch({
                url: '/pages/login/index'
              })
            }, 1500)
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.settings-page {
  min-height: 100vh;
  background-color: #F9FAFB;
}

.header-left {
  padding-left: 16px;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #1F2937;
}

.main-content {
  /* padding-top: 88px; */
  padding-bottom: 32px;
  height: calc(100vh - 88px);
}

/* 用户信息卡片 */
.user-section {
  display: flex;
  align-items: center;
  padding: 16px;
}

.user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.user-info {
  flex: 1;
}

.username {
  font-size: 16px;
  font-weight: 600;
  color: #1F2937;
  display: block;
  margin-bottom: 4px;
}

.user-email {
  font-size: 14px;
  color: #6B7280;
  display: block;
}

/* 分组标题 */
.section-title {
  display: flex;
  align-items: center;
  padding: 16px;
}

.title-text {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-left: 8px;
}

/* 设置列表 */
.settings-list {
  padding: 0;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #F3F4F6;
  background-color: #FFFFFF;
  min-height: 56px;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-item:active {
  background-color: #F9FAFB;
}

.setting-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.setting-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.setting-icon.notifications {
  background-color: #FEF3C7;
}

.setting-icon.theme {
  background-color: #E0E7FF;
}

.setting-icon.language {
  background-color: #D1FAE5;
}

.setting-icon.export {
  background-color: #DBEAFE;
}

.setting-icon.import {
  background-color: #D1FAE5;
}

.setting-icon.clear {
  background-color: #FEE2E2;
}

.setting-icon.about {
  background-color: #EDE9FE;
}

.setting-icon.privacy {
  background-color: #FEE2E2;
}

.setting-icon.terms {
  background-color: #F3F4F6;
}

.setting-title {
  font-size: 16px;
  color: #1F2937;
  font-weight: 500;
}

.setting-right {
  display: flex;
  align-items: center;
}

.setting-value {
  font-size: 14px;
  color: #6B7280;
  margin-right: 8px;
}

/* 退出登录按钮 */
.logout-section {
  padding: 0 16px;
  margin-top: 32px;
}

.logout-btn {
  width: 100%;
  background-color: #EF4444;
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logout-btn:active {
  background-color: #DC2626;
}

.logout-text {
  margin-left: 8px;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
}

/* Switch 样式调整 */
switch {
  transform: scale(0.9);
}

/* 响应式调整 */
@media screen and (max-width: 375px) {
  .user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 22px;
  }
  
  .username {
    font-size: 15px;
  }
  
  .setting-title {
    font-size: 15px;
  }
}
</style>